<template>
	<view class="container">
		<view class="header">
			<view class="header-search">
				<view style="width: 720rpx;">
					<u-search placeholder="请输入门店名称" v-model="value" :showAction="false" @search="handleSearch"
						@custom="handleSearch" @clear="handleClear">
					</u-search>
				</view>
			</view>
			<view class="header-location">
				<view>
					<u-icon name="map" size="40rpx" color="#32B499" />
					当前位置：{{ positionCity }}
				</view>
				<view @click="onRepositioning">重新定位</view>
			</view>
		</view>
		<view class="body">
			<view class="body-title"> 附近门店 </view>
			<block v-if="storeList.length > 0">
				<block v-for="(item, index) in storeList" :key="index">
					<view class="body-store-item">
						<view class="store-item_left">
							<u-icon name="map" size="40rpx" color="#32B499" />
							<!-- @click="onCheckStore(item)" -->
							<view class="store-item_left_address">
								<text>{{ item.name }}</text>
								<view>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.addressDetail }}</view>
							</view>
						</view>
						<view class="store-item_right">
							<text>距您{{ item.distanceStr }}</text>
							<u-icon name="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/aircraft.png"
								size="50rpx" color="#32B499" @click="onOpitonLocation(item)" />
						</view>
					</view>
				</block>
			</block>
			<view class="not-store" v-else>
				<view>当前区域20KM没有门店！</view>
				<view>赶紧加入我们！</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getLocation
	} from '@/utils/util';
	import {
		getUserInfo
	} from '@/common/auth';
	export default {
		data() {
			return {
				userId: getUserInfo().ypdUser?.userId,
				storeList: [],
				positionCity: '',
				value: '',
				latitude: '',
				longitude: '',
			}
		},
		onLoad(options) {
			let latitude = uni.getStorageSync('latitude');
			let longitude = uni.getStorageSync('longitude');
			this.latitude = latitude
			this.longitude = longitude
			this.getLocationName(latitude, longitude);
		},

		onShow() {
			this.getStoreList()
		},
		methods: {
			// 获取门店列表
			async getStoreList() {
				const {
					userId,
					latitude,
					longitude,
					value
				} = this;
				const param = {
					lat: latitude,
					lon: longitude,
					userId,
					name: value
				};
				let result = await this.$request.miniStoreList(param)
				result.data.map(item => {
					if (item.distance < 1000) {
						item.distanceStr = `${Number(item.distance).toFixed(1)}米`
					} else {
						item.distanceStr = `${(item.distance / 1000).toFixed(1)}千米`
					}
				})
				this.storeList = result.data
			},
			getLocationName(latitude, longitude) {
				let that = this;
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=YDPBZ-FPOKZ-S44XH-ZZYJ6-QBN7S-4UBPB`,
					header: {
						'Content-Type': 'application/json'
					},
					success: function(res) {
						console.log(res, 'res')
						const {
							address_component
						} = res.data.result;
						that.positionCity = address_component.city
					},
					fail: err => {
						that.$toast('请打开定位服务功能');
					}
				});
			},
			//重新定位
			onRepositioning() {
				getLocation();
				let lat = uni.getStorageSync('latitude') || '';
				let lon = uni.getStorageSync('longitude') || '';
				this.getLocationName(lat, lon);
				this.$toast('重新定位成功!');
			},
			//打开地图
			onOpitonLocation(item) {
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lon,
					scale: 8, // 缩放比例
					name: item.name,
					address: `${item.province}${item.city}${item.area}${item.addressDetail}`,
				});
			},
			//搜索
			handleSearch() {
				this.getStoreList();
			},
			//清空搜索框
			handleClear() {
				this.getStoreList();
			},

		}
	}
</script>
<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	page view {
		box-sizing: border-box;
	}

	.container {
		height: 100%;
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.header-search .t-search__input-container {
		border-radius: 32rpx !important;
		height: 64rpx !important;
	}

	.header-location {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

	.header-location>view:first-child {
		display: flex;
		align-items: center;
	}

	.header-location>view:last-child {
		width: 180rpx;
		height: 60rpx;
		background: #32B499;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.body {
		flex: 1;
		padding: 24rpx;
		box-sizing: border-box;
		height: 100%;
		/* overflow: auto; */
		display: flex;
		flex-direction: column;
	}

	.body-title {
		margin-bottom: 24rpx;
	}

	.body-store-item {
		height: 154rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.store-item_left {
		display: flex;
		align-items: center;
	}

	.store-item_left .store-item_left_address {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.store-item_left_address view {
		width: 386rpx;
		font-size: 24rpx;
		color: #666;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.store-item_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.store-item_right>text {
		margin-bottom: 10rpx;
	}

	.not-store {
		flex: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>